<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    <meta name="_csrf" content="${_csrf.token}"/>-->
    <title>登录</title>
</head>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css">
<style>
    * {margin: 0; padding: 0; box-sizing: border-box;}
    .form {position: relative;}
    .son {position: relative; top:50%;margin-top:-50px;left:50%;margin-left:-50px}
</style>
<body>
<div id="app">
<el-container>
    <el-header></el-header>
    <el-main style="margin-top: 10%">

        <div id="form" style="width: 310px;height:280px;margin: auto;background-color: #71d3bd">


            <el-form id="son" ref="form" :model="user"  style="margin: auto;padding-left: 10px;padding-right: 10px" >
                <el-form-item>
                    <h3 style="text-align: center">欢迎登录</h3>
                </el-form-item>
                <el-form-item  style="width: auto;">
                    <el-input v-model="user.username" placeholder="username"></el-input>
                </el-form-item>
                <el-form-item  style="width: auto;">
                    <el-input v-model="user.password" placeholder="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" style="width:100%;">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-main>
</el-container>
</div>


<!--axios-->
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<!--vue-->
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>

    new Vue({
        el: "#app",
        data: function (){
            return {
                user:{
                    username:'',
                    password:'',


                }
            }
        },
        methods:{
            onSubmit: function () {
                axios.post("/login", this.user,
                {
                    headers: {
                        'Content-Type': 'application/form-data'
                    }
                })

            }
        }})

</script>
</body>
</html>